<template>
  <div :class="className" :style="{ height: height, width: width }" />
</template>

<script>
require('echarts/theme/macarons')
import resize from '@/mixins/resize'

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'change-trend'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '100%'
    }
  },
  data() {
    return {
      chart: null
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      const that = this
      this.chart = this.$echarts.init(this.$el, 'macarons')

      this.chart.setOption({
        color: ['#27d391', '#eddb76', '#fe3838', '#2195f2'],
        legend: {
          top: 10,
          left: 'center',
          textStyle: {
            color: '#97b8d8'
          },
          data: ['气温', '海平面', '气压', '降水']
        },
        tooltip: {
          show: false,
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          }
        },
        xAxis: [
          {
            gridIndex: 0,
            axisLabel: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: 'rgba(151,184,216,0.5)',
                type: 'dashed'
              }
            },
            type: 'category',
            boundaryGap: false,
            data: [
              '1965',
              '1970',
              '1975',
              '1980',
              '1985',
              '1990',
              '1995',
              '2000',
              '2005',
              '2010',
              '2015',
              '现今'
            ]
          },
          {
            gridIndex: 1,
            axisLabel: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: 'rgba(151,184,216,0.5)',
                type: 'dashed'
              }
            },
            type: 'category',
            boundaryGap: false,
            data: [
              '1965',
              '1970',
              '1975',
              '1980',
              '1985',
              '1990',
              '1995',
              '2000',
              '2005',
              '2010',
              '2015',
              '现今'
            ]
          },
          {
            gridIndex: 2,
            axisLabel: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: 'rgba(151,184,216,0.5)',
                type: 'dashed'
              }
            },
            type: 'category',
            boundaryGap: false,
            data: [
              '1965',
              '1970',
              '1975',
              '1980',
              '1985',
              '1990',
              '1995',
              '2000',
              '2005',
              '2010',
              '2015',
              '现今'
            ]
          },
          {
            gridIndex: 3,
            axisLine: {
              lineStyle: {
                color: '#97b8d8'
              }
            },
            axisLabel: {
              color: '#97b8d8',
              fontSize: 14
            },
            type: 'category',
            boundaryGap: false,
            data: [
              '1965',
              '1970',
              '1975',
              '1980',
              '1985',
              '1990',
              '1995',
              '2000',
              '2005',
              '2010',
              '2015',
              '现今'
            ]
          }
        ],
        yAxis: [
          {
            gridIndex: 0,
            axisLabel: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            },
            splitLine: {
              show: false
            },
            splitNumber: 1,
            name: '气温',
            nameLocation: 'center',
            nameTextStyle: {
              color: '#97b8d8',
              fontSize: 14
            },
            nameRotate: 360
          },
          {
            gridIndex: 1,
            axisLabel: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            },
            splitLine: {
              show: false
            },
            splitNumber: 1,
            name: '海平面',
            nameLocation: 'center',
            nameTextStyle: {
              color: '#97b8d8',
              fontSize: 14
            },
            nameRotate: 360
          },
          {
            gridIndex: 2,
            axisLabel: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            },
            splitLine: {
              show: false
            },
            splitNumber: 1,
            name: '气压',
            nameLocation: 'center',
            nameTextStyle: {
              color: '#97b8d8',
              fontSize: 14
            },
            nameRotate: 360
          },
          {
            gridIndex: 3,
            axisLabel: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            },
            splitLine: {
              show: false
            },
            splitNumber: 1,
            name: '降水',
            nameLocation: 'center',
            nameTextStyle: {
              color: '#97b8d8',
              fontSize: 14
            },
            nameRotate: 360
          }
        ],
        grid: [
          {
            top: '10%',
            left: '7%',
            right: '4%',
            bottom: '4%',
            height: '20%'
          },
          {
            top: '30%',
            left: '7%',
            right: '4%',
            bottom: '4%',
            height: '20%'
          },
          {
            top: '50%',
            left: '7%',
            right: '4%',
            bottom: '4%',
            height: '20%'
          },
          {
            top: '70%',
            left: '7%',
            right: '4%',
            bottom: '4%',
            height: '20%'
          }
        ],
        series: [
          {
            type: 'line',
            data: [12, 16, 18, 20, 22, 20, 24, 26, 30, 35, 40, 48],
            xAxisIndex: 0,
            yAxisIndex: 0,
            smooth: true,
            lineStyle: {
              color: '#92c690'
            },
            itemStyle: {
              normal: {
                color: '#92c690',
                borderColor: '#92c690'
              }
            },
            areaStyle: {
              color: new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: '#92c690b3'
                },
                {
                  offset: 1,
                  color: '#92c69003'
                }
              ])
            }
          },
          {
            type: 'line',
            data: [
              23, 30.1, 32.4, 31.7, 34.3, 36.4, 39.5, 40.3, 41.2, 42.5, 44.8,
              47.9
            ],
            xAxisIndex: 1,
            yAxisIndex: 1,
            smooth: true,
            lineStyle: {
              color: '#219cab'
            },
            itemStyle: {
              normal: {
                color: '#219cab',
                borderColor: '#219cab'
              }
            },
            areaStyle: {
              color: new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: '#219cabb3'
                },
                {
                  offset: 1,
                  color: '#219cab03'
                }
              ])
            }
          },
          {
            type: 'line',
            data: [
              24, 74.1, 67.2, 79.5, 46.4, 46.4, 46.4, 74.1, 67.2, 79.5, 46.4, 30
            ],
            xAxisIndex: 2,
            yAxisIndex: 2,
            smooth: true,
            lineStyle: {
              color: '#6f68bf'
            },
            itemStyle: {
              normal: {
                color: '#6f68bf',
                borderColor: '#6f68bf'
              }
            },
            areaStyle: {
              color: new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: '#6f68bfb3'
                },
                {
                  offset: 1,
                  color: '#6f68bf03'
                }
              ])
            }
          },
          {
            type: 'line',
            data: [12, 45, 15, 2, 56, 15, 12, 45, 15, 2, 56, 15],
            xAxisIndex: 3,
            yAxisIndex: 3,
            smooth: true,
            lineStyle: {
              color: '#2195f2'
            },
            itemStyle: {
              normal: {
                color: '#2195f2',
                borderColor: '#219cab'
              }
            },
            areaStyle: {
              color: new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: '#2195f2'
                },
                {
                  offset: 1,
                  color: '#219cab03'
                }
              ])
            }
          }
        ]
      })
    }
  }
}
</script>
